<template>
  <div class="container">
    <span>类型人数分布：</span>
    <div
      id="homebarcharts"
      :class="className"
      :style="{ height: height, width: width }"
    />
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
      required: false,
    },
    height: {
      type: String,
      default: "300px",
      required: false,
    },
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const animationDuration = 6000;
      const barChart = echarts.init(document.getElementById("homebarcharts"));
      barChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: 10,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            color: ["#57CAEB", "#5DDAB4", "#57CAEB", "#435EBE"],
            name: "pageA",
            type: "bar",
            stack: "vistors",
            // barWidth: '60%',
            data: [79, 52, 200, 334, 390, 330, 220],
            animationDuration,
          },
          {
            name: "pageB",
            type: "bar",
            stack: "vistors",
            // barWidth: '60%',
            data: [80, 52, 200, 334, 390, 330, 220],
            animationDuration,
          },
          {
            name: "pageC",
            type: "bar",
            stack: "vistors",
            // barWidth: '60%',
            data: [30, 52, 200, 334, 390, 330, 220],
            animationDuration,
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>